<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>民政地名地址数据管理平台</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="/build/css/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/my-style.css">
    <link rel="stylesheet" type="text/css" href="/ztree/3.5/css/metro/zTreeStyle.css"/>
</head>
<style>
    .layui-layer-setwin .layui-layer-max {
        display: none;
    }
    font{
        display: none;
    }
</style>
<body>
<div class="kit-doc">

    <!--表格搜索框组-->
    <div class="layui-form-item layui-formgroup layui-tab-card">
        <!-- input输入框 -->
        <div class="layui-inline">
            <label class="layui-form-label">角色名称：</label>
            <div class="layui-input-inline">
                <input name="phone" lay-verify="required|phone" autocomplete="off"
                       class="layui-input" type="tel" id="searchContext">
            </div>
        </div>

        <!-- 按钮 -->
        <button class="layui-btn" id="searchBtn">搜索</button>
    </div>

    <div class="layui-card layui-card-body">
        <!-- 表格增删改查btn -->
        <div class="layui-btn-group layui-m-b-5">
            <button class="layui-btn layui-btn-sm" id="modal1"><i class="fa fa-plus"></i>&nbsp;增加
            </button>

        </div>

        <table class="layui-table xuhao-table" id="table-context" lay-filter="test">
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </table>

    </div>

</div>
<!-- 弹框content01 -->
<div id="modal-content1" style="display: none; padding:20px;">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名</label>
            <div class="layui-input-block">
                <input type="text" name="roleName" required lay-verify="required"
                       placeholder="请输入角色名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色关键字</label>
            <div class="layui-input-block">
                <input type="text" name="roleKey" required lay-verify="required"
                       placeholder="请输入关键字" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色排序</label>
            <div class="layui-input-block">
                <input type="number" name="roleSort" required placeholder="请输入显示顺序"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
       <!-- <div class="layui-form-item">
            <label class="layui-form-label">启用/禁用</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" id="status" lay-skin="switch"  lay-text="启用|禁用"
                       lay-filter="switchStatus">
            </div>
        </div>-->

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注标识</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单权限</label>
            <div class="layui-input-block" style="width: 50%;height: 200px;overflow-y: scroll">
                <div id="menuTrees" class="ztree"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block modal-footer">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<!--状态模板-->
<!--<script type="text/html" id="statusTpl">
    <input type="checkbox" name="sex" value="{{d.status}}" lay-skin="switch" lay-text="启用|禁用"
           readonly="readonly" disabled="disabled"
           lay-filter="status" {{ d.status== '0' ? 'checked' : '' }}>
</script>-->

<script src="../../static/plugins/layui/layui.js" th:src="@{/plugins/layui/layui.js}"></script>
<script type="text/javascript" src="../../static/js/jquery.min.js"
        th:src="@{/js/jquery.min.js}"></script>
<script src="/ztree/3.5/js/jquery.ztree.all-3.5.js"></script>
<script src="/js/ry-ui.js"></script>

<script>
    // 树结构初始化加载
    var setting = {
        check: {enable: true, nocheckInherit: true, chkboxType: {"Y": "ps", "N": "ps"}},
        view: {selectedMulti: false, nameIsHTML: true},
        data: {simpleData: {enable: true}, key: {title: "title"}},
        callback: {
            beforeClick: function (treeId, treeNode, clickFlag) {
                var menuTrees = $.fn.zTree.getZTreeObj(treeId);
                menuTrees.checkNode(treeNode, !treeNode.checked, true, true);
                return false;
            }
        }
    }, menuTrees, loadTree = function () {
        $.get("/system/resource/roleResourceTreeData", function (data) {
            menuTrees = $.fn.zTree.init($("#menuTrees"), setting, data); //.expandAll(true);
        }, null, null, "正在加载，请稍后...");
    };
    loadTree();




    function selectCheckeds() {
        var menuIds = "";
        var treeNodes = menuTrees.getCheckedNodes(true);
        for (var i = 0; i < treeNodes.length; i++) {
            if (treeNodes[i].getCheckStatus().half != true) {
                if (menuIds == "") {
                    menuIds = treeNodes[i].id;
                } else {
                    menuIds += ("," + treeNodes[i].id);
                }
            }
        }
        return menuIds;
    }
</script>
<!-- 表单 -->
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

    });
</script>
<!--弹框-->
<script>

    layui.config({
        base: 'build/js/'
    }).use(['app', 'message'], function () {
        var $ = layui.jquery,
            layer = layui.layer;
        //将message设置为全局以便子页面调用



    });
    $('#modal1').on('click', function () {
        layer.open({
            title: "内容添加",
            type: 1,
            content: $("#modal-content1"),
            area: ['40%', '60%'],
            shadeClose: true,
            end: function () {
                //关闭窗口时清空表单内容
                $("#modal-content1").find('input[type=text],select,textarea,input[type=hidden]').each(function () {
                    $(this).val('');
                });

            }
        });
    });
</script>

<!-- tree -->
<script type="text/javascript">
    function getChecked() {
        var nodes = $('#tt').tree('getChecked');
        var s = '';
        for (var i = 0; i < nodes.length; i++) {
            if (s != '') s += ',';
            s += nodes[i].text;
        }
        alert(s);
    }
</script>
<script>
    layui.use(['table', 'jquery'], function () {
        var table = layui.table;
        var $ = layui.$;
        var roleTable = table.render({
            elem: '#table-context'
            , url: '/system/role/list'
            , height: 'full-200'
            , page: true
            , limit: 10
            , limits: [10, 20, 30]
            , request: {
                pageName: 'page' //页码的参数名称，默认：page
                , limitName: 'size' //每页数据量的参数名，默认：limit
            }
            // , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [
                [
                    {field: 'roleName', title: '角色名称', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , {field: 'roleKey', title: '关键字', align: 'center'}
                    , {field: 'roleSort', title: '显示顺序', align: 'center'}
                    // , {field: 'status', title: '状态', align: 'center', templet: '#statusTpl'}
                    , {field: 'remark', title: '标识', align: 'center'}
                    , {fixed: 'right', align: 'center', toolbar: '#barDemo'}
                ]
            ]
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') {
                layer.confirm('确定删除当前角色吗？', function (index) {
                    console.log("当前行的数据为：" + data.id);
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                    layui.$.ajax({
                        type: 'DELETE',
                        url: "/system/role/del/" + data.id,
                        success: function (res) {
                            // console.log(res);
                            layer.closeAll();
                            if (res.code == 0) {
                                layer.msg("删除成功");
                                window.location.reload();
                            } else {
                                layer.msg("删除失败" + res.msg);
                            }
                        }
                    });
                });
            } else if (layEvent === 'edit') {
                $.modal.open("编辑角色", "/system/role/update/" + data.id);
            }
        });
        // 查询
        $("#searchBtn").click(function () {
            roleTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    roleName: $("#searchContext").val()
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })
    });

</script>
<script>
    // 增加项目表单
    layui.use(['form', 'layedit', 'laydate', 'jquery'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#startDate'
        });
        laydate.render({
            elem: '#endDate'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , pass: [/(.+){6,12}$/, '密码必须6到12位']
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //监听指定开关
        form.on('switch(switchStatus)', function (data) {
            this.value = this.checked ? "0" : "1";
        });


        var $ = layui.$;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            // data.field.status = data.field.status ? "0" : "1";
            data.field.resourceIds = selectCheckeds();
            $.ajax({
                type: 'POST',
                url: "/system/role/add",
                data: data.field,
                success: function (res) {
                    // console.log(res);
                    layer.closeAll();
                    if (res.code == 0) {
                        layer.msg("新增成功");
                        window.location.reload();
                    } else {
                        layer.msg("新增失败" + res.msg);
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>